<template>
  <div class="about">
    <div>
      <el-row>
        <el-col :span="2">
          <el-button>添加</el-button>
        </el-col>
        <el-col :span="16">
          &nbsp;
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="19">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="1">
              &nbsp;
            </el-col>
            <el-col :span="4">
              <el-button type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="教师id" width="180">
        </el-table-column>
         <el-table-column prop="number" label="教师工号">
        </el-table-column> 
         <el-table-column prop="name" label="教师姓名">
        </el-table-column>
        <el-table-column prop="departmentName" label="所属系">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope"> <!-- 或者使用 v-slot:default="scope" -->
            <el-button type="success" size="mini">编辑</el-button>
            <el-button type="danger" @click="dele(scope.row.id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
    </div>
    <el-pagination style="margin-top: 24px; text-align: center;" background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>
<script>
import { teacherList } from '@/api/index'
export default {
  data() {
    return {
      input: '',
      tableData: []
    }
  },
  methods: {
    getTeacherList() {
      teacherList().then(res => {
        console.log(res, '教师管理');
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    }
  },
  mounted() {
    this.getTeacherList()
  },
  
  
}
</script>
